<template>
	<view class="radius-12 bg-white py-16 px-12 fs-14" style="position: relative;" @click="toDetail">
		<view v-if="data.promotionType === 'GROUP_BUY'" class="hide-tip">拼团</view>
		<view class="mb-8 two-lines-ellipsis">
			<!-- <tag v-if="data.promotionLabel" class="mr-4">{{ data.promotionLabel }}</tag> -->
			<text class="c3 font-semibold fs-16 align-middle">{{ data.activeTitle }}</text>
		</view>
		<view class="flex item-center mb-12">
			<text class="color-primary">¥</text><text class="color-primary fs-21 font-semibold mr-8">{{
				numberFormat(data.activePrice) }}</text>
		</view>
		<view class="mb-12">
			<!-- 活动列表默认显示单图（显示活动图片首张图片）-->
			<image class="radius-8 w-full overflow-hidden" style="height:212px;" mode="aspectFill" :src="coverPicture">
			</image>
		</view>
		<view class="flex justify-between item-center mb-8">
			<text class="text-color-hint fs-12">{{ data.createTime }} 创建</text>
			<text class="font-semibold" :style="`color:${activeStateDict[data.activeState].color}`">{{
				activeStateDict[data.activeState].text }}</text>
		</view>
		<view class="release-btn fs-16" @click="toPublish">复制活动</view>
	</view>
</template>

<script setup>
import { watchEffect } from 'vue'
import { useActivity } from '@/hooks/useActivity.js'
import { numberFormat } from '@/utils/index.js'

const props = defineProps({
	data: {
		type: Object,
		required: true
	}
})

const { isSignUp, photos, coverPicture, updateActivityInfo } = useActivity()

watchEffect(() => {
	updateActivityInfo(props.data)
})

const activeStateDict = {
	1: {
		text: '未发布',
		color: '#FCB513',
	},
	2: {
		text: '未开始', // 已发布，活动未开始
		color: '#00AEFF',
	},
	3: {
		text: '进行中',
		color: '#16BE62',
	},
	4: {
		text: '已结束',
		color: 'rgba(51, 51, 51, 0.60)',
	},
}
const toPublish = () => {
	const url = props.data.promotionType === 'GROUP_BUY'
		? '/pagesG/publish/create-group-buy-activity'
		: '/pagesG/publish/create-activity';
	uni.navigateTo({
		url: `${url}?id=${props.data.id}&from=copy`
	})
}
</script>
<style scoped lang="scss">
.release-btn {
	padding: 8px 0;
	border-radius: 8px;
	background: #FA4543;
	color: #ffffff;
	margin: 10px 0;
	text-align: center;
}

.hide-tip {
	z-index: 1;
	padding: 2px 8px;
	font-size: 12px;
	color: #333;
	position: absolute;
	top: 0;
	left: 0;
	background: #FBDBB0;
	border-radius: 8px 0px 8px 0px;
}
</style>